<template>
	<view>
		<!-- #ifdef H5 -->
		<view>
			<view :class="['goods-qrcode-modal', data.qrcode_active]">
					<view class="goods-qrcode-body flex-col">
							<view class="flex-grow-1" style="position: relative">
									<view style="position: absolute;left: 0;top:0;width: 100%;height: 100%;padding: 100upx 100upx 60upx">
											<view class="goods-qrcode-box">
													<view class="goods-qrcode-loading flex-x-center flex-y-center">
															<view class="flex-x-center flex-col">
																	<image :src="data.__wxapp_img.system.loading2.url" style="width: 150upx;height: 150upx"></image>
																	<view style="color: #888">海报生成中</view>
															</view>
													</view>
													<image @tap="$emit('qrcodeClick',$event)" :class="['goods-qrcode', data.goods_qrcode?'active':'']" :data-src="data.goods_qrcode" mode="widthFix" :src="data.goods_qrcode"></image>
											</view>
									</view>
							</view>
							<view class="flex-grow-0 flex-col flex-x-center" style="padding: 0 60upx 80upx">
									<view style="margin-bottom: 20upx;padding: 0 40upx">
											<button @tap="$emit('saveQrcode',$event)" style="background: #ff4544;color: #fff;" v-if="data.goods_qrcode">
													保存图片
											</button>
											<button style="opacity: .4" v-else>保存图片</button>
									</view>
									<view style="color: #888;font-size: 9pt;text-align: center">保存至相册可以分享给朋友</view>
							</view>
							<view @tap="$emit('qrcodeClose',$event)" class="goods-qrcode-close">
									<image :src="data.__wxapp_img.dapp.close2.url" style="width: 50upx;height: 50upx;display: block"></image>
							</view>
					</view>
			</view>
			<view :class="['share-modal', data.share_modal_active]">
					<view class="share-modal-body">
							<view class="flex-row">
									<view class="flex-grow-1 flex-x-center">
										<!-- #ifdef MP-WEIXIN -->
											<button class="share-bottom" openType="share" style="height:100%">
													<image :src="data.__wxapp_img.share.friend.url"></image>
													<view>分享给朋友</view>
											</button>
										<!-- #endif -->
										<!-- #ifdef H5 -->
										<button class="share-bottom" @click="$emit('onShareWebMessage',$event)" style="height:100%">
												<image :src="data.__wxapp_img.share.friend.url"></image>
												<view>分享给朋友</view>
										</button>
										<!-- #endif -->
									</view>
									<view class="flex-grow-1 flex-x-center">
											<view @tap="$emit('getGoodsQrcode',$event)" class="share-bottom">
													<image :src="data.__wxapp_img.share.qrcode.url"></image>
													<view>生成海报</view>
											</view>
									</view>
							</view>
							<view @tap="$emit('shareModalClose',$event)" class="share-modal-close flex-y-center flex-x-center">
									<view>关闭</view>
							</view>
					</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef H5 -->	
		<view>
		<cover-view :class="['goods-qrcode-modal', data.qrcode_active]">
		    <cover-view class="goods-qrcode-body flex-col">
		        <cover-view class="flex-grow-1" style="position: relative">
		            <cover-view style="position: absolute;left: 0;top:0;width: 100%;height: 100%;padding: 100upx 100upx 60upx">
		                <cover-view class="goods-qrcode-box">
		                    <cover-view class="goods-qrcode-loading flex-x-center flex-y-center">
		                        <cover-view class="flex-x-center flex-col">
		                            <cover-image :src="data.__wxapp_img.system.loading2.url" style="width: 150upx;height: 150upx"></cover-image>
		                            <cover-view style="color: #888">海报生成中</cover-view>
		                        </cover-view>
		                    </cover-view>
		                    <cover-image @tap="$emit('qrcodeClick',$event)" :class="['goods-qrcode', data.goods_qrcode?'active':'']" :data-src="data.goods_qrcode" mode="widthFix" :src="data.goods_qrcode"></cover-image>
		                </cover-view>
		            </cover-view>
		        </cover-view>
		        <cover-view class="flex-grow-0 flex-col flex-x-center" style="padding: 0 60upx 80upx">
		            <cover-view style="margin-bottom: 20upx;padding: 0 40upx">
		                <button @tap="$emit('saveQrcode',$event)" style="background: #ff4544;color: #fff;" v-if="data.goods_qrcode">
		                    保存图片
		                </button>
		                <button style="opacity: .4" v-else>保存图片</button>
		            </cover-view>
		            <cover-view style="color: #888;font-size: 9pt;text-align: center">保存至相册可以分享给朋友</cover-view>
		        </cover-view>
		        <cover-view @tap="$emit('qrcodeClose',$event)" class="goods-qrcode-close">
		            <cover-image :src="data.__wxapp_img.dapp.close2.url" style="width: 50upx;height: 50upx;display: block"></cover-image>
		        </cover-view>
		    </cover-view>
		</cover-view>
		<cover-view :class="['share-modal', data.share_modal_active]">
		    <cover-view class="share-modal-body">
		        <cover-view class="flex-row">
		            <cover-view class="flex-grow-1 flex-x-center">
									<!-- #ifdef MP-WEIXIN -->
		                <button class="share-bottom" openType="share" style="height:100%">
		                    <cover-image :src="data.__wxapp_img.share.friend.url"></cover-image>
		                    <cover-view>分享给朋友</cover-view>
		                </button>
									<!-- #endif -->
									<!-- #ifdef H5 -->
									<button class="share-bottom" @click="$emit('onShareWebMessage',$event)" style="height:100%">
									    <cover-image :src="data.__wxapp_img.share.friend.url"></cover-image>
									    <cover-view>分享给朋友</cover-view>
									</button>
									<!-- #endif -->
		            </cover-view>
		            <cover-view class="flex-grow-1 flex-x-center">
		                <cover-view @tap="$emit('getGoodsQrcode',$event)" class="share-bottom">
		                    <cover-image :src="data.__wxapp_img.share.qrcode.url"></cover-image>
		                    <cover-view>生成海报</cover-view>
		                </cover-view>
		            </cover-view>
		        </cover-view>
		        <cover-view @tap="$emit('shareModalClose',$event)" class="share-modal-close flex-y-center flex-x-center">
		            <cover-view>关闭</cover-view>
		        </cover-view>
		    </cover-view>
		</cover-view>
		</view>
		<!-- #endif -->

	</view>
</template>

<script>var myVue = {};
	export default {
		props:['data'],
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.goods-qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,.5);
    padding: 40upx;
    transform: translateY(100%);
    opacity: .5;
    transition: opacity 250ms;
    visibility: hidden;
}

.goods-qrcode-modal.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.goods-qrcode-body {
    background: #fff;
    height: 100%;
    border-radius: 10upx;
    z-index: 99999;
}

.goods-qrcode-modal .goods-qrcode-box {
    height: 100%;
    position: relative;
    box-shadow: 0 0 15upx rgba(0,0,0,.15);
}

.goods-qrcode-modal .goods-qrcode-loading {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.goods-qrcode-modal .goods-qrcode {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
}

.goods-qrcode-modal .goods-qrcode.active {
    display: block;
}

.goods-qrcode-modal .goods-qrcode-close {
    position: absolute;
    top: 40upx;
    right: 40upx;
    padding: 15upx;
}

.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.0);
    z-index: 1000;
    transform: translateY(100%);
    transition: background 250ms;
}

.share-modal .share-modal-body {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
    background: #f2f2f2;
    padding-top: 60upx;
    transform: translateY(100%);
    transition: transform 250ms;
}

.share-modal.active {
    transform: translateY(0);
    background: rgba(0,0,0,.5);
}

.share-modal.active .share-modal-body {
    transform: translateY(0);
}

.share-modal .share-bottom {
    text-align: center;
    font-size: 9pt;
    margin: 0;
    padding: 0;
    margin-bottom: 60upx;
    line-height: inherit;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    display: inline-block;
}

.share-modal .share-bottom:after {
    display: none;
}

.share-modal .share-bottom cover-image,.share-modal .share-bottom image {
    width: 120upx;
    height: 120upx;
    margin-bottom: 12upx;
    border-radius: 999upx;
    border: 1upx solid #eee;
}

.share-modal .share-bottom:active cover-image,.share-modal .share-bottom:active image {
    opacity: .7;
}

.share-modal .share-modal-close {
    background: #fff;
    height: 100upx;
    border-top: 1upx solid #eee;
}
</style>
